<template>
	<div class="playerBar">
		<transition name="tran">
			<div class="contentBox" @click="cut('show')" v-if="showBar" v-show="!showViews">
				<div class="coverBox">
					<img :src="curSong.al.picUrl" alt="">
				</div>
				<div class="sonName">
					<span>{{curSong.name}}</span>
					<div class="nameBox">
						<p v-for="(item,index) in curSong.ar" :key="index">{{item.name}}</p>
					</div>
				</div>
				<div class="showIcon">
					<i class="iconfont icon-shangyishou" @click.stop="changeSong('pre')"></i>
					<i class="iconfont" @click.stop="changeState()" :class="playerState=='playing'?'icon-zanting':'icon-bofang'"></i>
					<i class="iconfont icon-xiayishou" @click.stop="changeSong('next')"></i>
				</div>
			</div>
		</transition>
		<transition name="tran">
			<playerViews @colseViews="cut('colse')" v-show="showViews" @changeSong="changeSong()"></playerViews>
		</transition>
	</div>
</template>

<script>
	import playerViews from '../components/playerViews.vue'
	export default {
		data(){
			return{
				showViews:false
			}
		},
		mounted(){
			this.audio.addEventListener("ended",()=>{
				this.changeSong('nextSong')
			})
		},
		methods:{
			cut(type){
				type=='colse' ? this.showViews = false : this.showViews = true
			},
			changeState(){
				if(this.playerState=="playing"){
					this.audio.pause();
					this.$store.commit("changePlayerState",'pause');
				}else{
					this.audio.play();
					this.$store.commit("changePlayerState",'playing');
				}
			},
			changeSong(type){
				console.log(type)
				if(type == 'pre'){
					this.$store.commit('preSong')
				}else{
					this.$store.commit('nextSong')
				}
				
				let playList = this.$store.state.playList;
				let playingIndex = this.$store.state.playingIndex;
				
				let audioSrc = `https://music.163.com/song/media/outer/url?id=${playList[playingIndex]}.mp3`
				this.audio.transmit(audioSrc)
				
				this.axios({
					url:'/song/detail'+`?ids=${playList[playingIndex]}`
				}).then(res=>{
					console.log(res.data.songs)
					this.$store.commit("setCurrentSong",res.data.songs[0])
				})
			}
		},
		computed:{
			curSong(){
				return this.$store.state.currentSong
			},
			showBar(){
				return this.$store.state.currentSong.al.id
			},
			playerState(){
				return this.$store.state.playerState
			},
		},
		components:{
			playerViews
		}
	}
</script>

<style lang="scss" scoped>
	/* 动画开始前 和 结束时刻 */
	.tran-enter,.tran-leave-to{
		transform: translateY(0);
		width: 100%;
	}
	/* 动画进场时 和 元素离场时 */
	.tran-enter-active,.tran-leave-active{
		transform: translateY(100%);
		width: 100%;
	}
	
	.playerBar{
		.contentBox{
			position: fixed;
			bottom: 0;
			width: 100%;
			transition: all 0.2s;
			background-color: white;
			padding: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			opacity: 0.95;
			border-top: 1px solid gainsboro;
			.coverBox{
				width: 40px;
				height: 40px;
				
				>img{
				border-radius: 50%;
					width: 100%;
					height: 100%;
				}
			}
			.sonName{
				text-align: left;
				width: 50%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				>span{
					padding-left: 4px;
					font-size: 14px;
				}
				.nameBox{
					>p{
						font-size: 12px;
						color: darkgray;
						padding-top: 4px;
						padding: 4px 4px 0 4px;
						display: inline-block;
						
					}
				}
			}
			.showIcon{
				width: 35%;
				>i{
					font-size: 25px;
					padding: 5px;
				}
			}
		}
	}
</style>
